<template>
	<view class="uni-flex uni-flex-item uni-column">

		<view class="uni-list">
			<block v-for="(item,index) in list" :key="index">
				<view class="uni-list-cell" @tap="openWindow(item.url)">
					<view class="uni-list-cell-navigate uni-navigate-right">
						{{item.title}}
						<text class="uni-badge uni-badge-primary uni-navigate-badge" v-show="item.tag">{{item.tag}}</text>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data: {
			list: [{
					url: 'express',
					title: 'Javascript表达式',
					tag: ''
				}, {
					url: 'computed',
					title: '计算属性',
					tag: ''
				}, {
					url: 'vfor',
					title: '列表渲染',
					tag: ''
				},{
					url: 'load-more',
					title: '上拉加载更多',
					tag: ''
				},{
					url: 'random',
					title: '随机数',
					tag: '生命周期'
				} , {
					url: 'event',
					title: '事件处理',
					tag: ''
				},
				{
					url: 'button-counter',
					title: '计数器',
					tag: '组件'
				}, {
					url: 'switch-button',
					title: '按钮状态切换',
					tag: '组件'
				},
				{
					url: 'number-box',
					title: '数字输入组件',
					tag: '组件'
				}
			]

		},
		computed: {

		},
		methods: {
			openWindow: url => {
				uni.navigateTo({
					url: url,
				})
			}
		},
		onLoad: function (e) {
			uni.setNavigationBarTitle({
				title: '演示程序',
			});
			
			console.log(JSON.stringify(e));
		}
	}
</script>

<style>
	@import "../../common/uni.css";
</style>
